
export default (className) => {

  let mouseDownX = 0
  let mouseDownY = 0
  let deltaX = 0
  let deltaY = 0
  let sumX = 0
  let sumY = 0

  let header = null
  let contain = null
  let modalContent = null

  let onmousedown = false

  const initialEvent = (visible) => {

    if (visible) {
      setTimeout(() => {
        window.removeEventListener('mouseup', removeUp, false)
        contain = document.getElementsByClassName(className)[0]
        header = contain.getElementsByClassName('ant-modal-header')?.[0];
        modalContent = contain.getElementsByClassName('ant-modal-content')?.[0];
        if(!header || !modalContent){
          return;
        }
        modalContent.style.left = 0;
        modalContent.style.transform = 'translate(0px,0px)';

        header.style.cursor = 'all-scroll';

        header.onmousedown = (e) => {
          onmousedown = true
          mouseDownX = e.pageX
          mouseDownY = e.pageY
          document.body.onselectstart = () => false
          window.addEventListener('mousemove', handleMove, false)
        }

        window.addEventListener('mouseup', removeUp, false)
      }, 0)
    }
  };

  const resetNum = () => {
    mouseDownX = 0
    mouseDownY = 0
    deltaX = 0
    deltaY = 0
    sumX = 0
    sumY = 0
  };

  const handleMove =(event) => {
    const delta1X = event.pageX - mouseDownX
    const delta1Y = event.pageY - mouseDownY
    deltaX = delta1X
    deltaY = delta1Y
    modalContent.style.transform = `translate(${delta1X + sumX}px, ${delta1Y + sumY}px)`
  };

  const removeMove = () => {
    window.removeEventListener('mousemove', handleMove, false)
  };

  const removeUp = (e) => {
    document.body.onselectstart = () => true
    if (onmousedown && !(e.pageX === mouseDownX && e.pageY === mouseDownY)) {
      onmousedown = false
      sumX = sumX + deltaX
      sumY = sumY + deltaY
    }
    removeMove()
  };

  return {
    initialEvent,
    resetNum,
    removeUp,
    removeMove,
    handleMove,

  }
}
